<template>
  <div>
    <!-- 引用 dom 元素 -->
    <h1 ref="myh1" >App 根组件</h1>
    <hr/>

    <button type="button" class="btn btn-primary" @click="getRef" >获取 $refs 引用</button>

    <!-- 引用组件 -->
    <Counter ref="counterRef" ></Counter>
  </div>
</template>

<script>
// 导入组件
import Counter from './Counter.vue'
export default {
  name: 'MyApp',
  methods:{
    getRef(){
      // console.log(this)
      // console.log(this.$refs)
      // console.dir(this.$refs.myh1)

      //this.$refs.myh1.style.color='red'

      // console.log(this.$refs.counterRef)
      this.$refs.counterRef.reset()

    }
  },
  components:{
     Counter
  }
}
</script>

<style scoped lang="less" >

</style>